<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myCanvas { 
            width: 600px;
            height: 400px;
            position: absolute;   
            margin:auto;         
            left: 0;              
            right: 0;
            top: 0;
            bottom: 0;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas class="myCanvas" width="600px" height="400px"></canvas>
    </div>

    <script>
        // var ctx = document.querySelector('canvas').getContext('2d')

        var data = [
            {title: "20岁以下", num: 15},
            {title: "20岁-25岁", num: 25},
            {title: "25岁-30岁", num: 30},
            {title: "30岁-40岁", num: 25},
            {title: "40岁以上", num: 10}
        ];

        function PicChart() {
        this.ctx = document.querySelector('canvas').getContext('2d');
        this.w = this.ctx.canvas.width;
        this.h = this.ctx.canvas.height;
        //圆心
        this.x0 = this.w / 2 + 60;
        this.y0 = this.h / 2;
        //半径
        this.radius = 150;
        //伸出的线
        this.outline = 20;
        //说明文字前的矩形宽度与高度
        this.rectW=30;
        this.rectH=20;
        //说明文字前矩形之间的间隔
        this.space=10;
    }

    PicChart.prototype.init = function () {
        this.drawPic();
    }
    // 绘制饼图
    PicChart.prototype.drawPic = function () {
        var angleList = this.draeAngle();
        var startAngle = 0;
        angleList.forEach(function (item, index) {
            var endAngle = startAngle + item.angle;
            this.ctx.beginPath();
            this.ctx.moveTo(this.x0, this.y0);
            this.ctx.arc(this.x0, this.y0, this.radius, startAngle, endAngle);
            this.ctx.closePath();
            var color = this.ctx.fillStyle = this.randomCorlor();
            this.ctx.fill();
            //调用绘制标题
            this.drawTitle(startAngle, item.angle, color,item.title);
            //绘制矩形说明文字
            this.drawDesc(item.title,color,index);
            //存储下一个扇形的开始弧度
            startAngle = endAngle;
        }.bind(this))

    }
    // 绘制标题
    PicChart.prototype.drawTitle = function (startAngle, angle, color,title) {
        //确定伸出去的点，通过三角函数确定邻边与对边
        var edge = this.radius+this.outline;//斜边
        var edgeX = edge * Math.cos(startAngle + angle / 2);//邻边
        var edgeY = edge * Math.sin(startAngle + angle / 2);// 对边

        var outX = this.x0 + edgeX;
        var outY = this.y0 + edgeY;

        this.ctx.beginPath();
        this.ctx.moveTo(this.x0, this.y0);
        this.ctx.lineTo(outX, outY);
        this.ctx.strokeStyle = color;

        // 文字与线划线
        this.ctx.font='14px 微软雅黑';
        var textWidth=this.ctx.measureText(title).width;
        if (outX>this.x0){
            //相对圆点 右边
            this.ctx.lineTo(outX+textWidth,outY);
            this.ctx.textAlign='left';
        }else {
            //相对圆点 左边
            this.ctx.lineTo(outX-textWidth,outY);
            this.ctx.textAlign='right';
        }
        this.ctx.fillText(title,outX,outY-5);
        this.ctx.textBaseline='bottom';
        this.ctx.stroke();

    }
    // 绘制饼图说明
    PicChart.prototype.drawDesc = function (title,color,index) {
        this.ctx.fillStyle=color;
        var x=20;
        var y=this.space+(this.space+this.rectH)*index;
        this.ctx.fillRect(x,y,this.rectW,this.rectH);
        this.ctx.textAlign='left';
        this.ctx.textBaseline='middle';
        this.ctx.fillText(title,x+this.rectW+10,y+this.rectH/2);
    }

    //将数据转为弧度
    PicChart.prototype.draeAngle = function () {
        var total = 0;
        data.forEach(function (item, index) {
            total += item.num;
        });
        data.forEach(function (item, index) {
            var angle = item.num / total * 2 * Math.PI;
            //将angle放入对象
            item.angle = angle;
        })
        return data;
    }
    //设置随机颜色

    PicChart.prototype.randomCorlor = function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    var picChart = new PicChart();
    picChart.init();

    </script>
</body>
</html>